<template>
  <div style="min-height: 100vh; background: #f7f7f7">
    <div class="topContent">
      <img src="@/assets/img/bannerTop.png" />
    </div>
    <div class="centerContent">
      <div
        class="progressBox"
        v-if="!!list.stagelList && list.stagelList.length > 0"
        v-for="(item, key) in list.stagelList"
        :key="key"
      >
        <p class="topHook">
          <img v-if="key == 0" src="@/assets/img/hook.png" /><img
            v-if="key == 0"
            src="@/assets/img/hook.png"
          />
        </p>
        <div class="titleStyle">
          <p></p>
          <p>{{ item.name }}</p>
          <p></p>
        </div>
        <div class="stepStyle">
          <!-- <van-steps :active="active" active-icon="play-circle" active-color="#37B5B5">
                <van-step>买家下单</van-step>
                <van-step>商家接单</van-step>
            </van-steps> -->
          <div
            :id="[keys < 1 ? 'activeStyle' : '']"
            v-if="!!item.operationList && item.operationList.length > 0"
            v-for="(items, keys) in item.operationList"
            :key="keys"
          >
            <div>
              <p></p>
              <span>{{ !!items.name && !!items.name.length>6 ? items.name+'...' : items.name}}</span>
              <span>{{ items.intervalDays + "天" }}</span>
            </div>
            <p v-if="keys != item.operationList.length - 1"></p>
          </div>
        </div>
        <p class="bottomHook" v-if="key !== list.stagelList.length - 1">
          <img src="@/assets/img/btohook.png" /><img
            src="@/assets/img/btohook.png"
          />
        </p>
      </div>
    </div>
    <van-cell-group>
      <van-switch-cell
        active-color="#37B5B5"
        inactive-color="#eee"
        :loading="loadings"
        @change="onChanges"
        v-model="checkeds"
        title="绑定标准"
      />
    </van-cell-group>
    <van-cell-group>
      <van-switch-cell
        active-color="#37B5B5"
        inactive-color="#eee"
        :loading="loading"
        @change="onChange"
        v-model="checked"
        title="设为默认标准"
      />
    </van-cell-group>

  </div>
</template>
<script>
import { Col,Toast, Row, Dialog, Step, Steps, SwitchCell, Cell } from "vant";
import { getValue, setValue, setObject } from "@/utils/auth";
import { postHandle, getHandle } from "@/api";
export default {
  name: "PlantingDetail",
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Col.name]: Col,
    [Row.name]: Row,
    [Step.name]: Step,
    [Steps.name]: Steps,
    [SwitchCell.name]: SwitchCell,
    [Cell.name]: Cell,
    [Toast.name]: Toast,
  },
  data() {
    return {
      id: getValue("id"),
      show: false,
      object: {},
      active: 1,
      checked: false,
      checkeds: false,
      loading: false,
      loadings: false,
      list: [],
      objGlobal: {
        // loginUserId: getValue("loginUserId") || '',
        // tenantCode: getValue("tenantCode") || '',
        // token: getValue("token") || '',
      },
    };
  },
  created() {
    // this.$bridge.register("getData", (loginUserId, tenantCode, token) => {
    //   // 请加上自己的事件列表事件
    //   this.objGlobal.loginUserId = loginUserId;
    //   this.objGlobal.tenantCode = tenantCode;
    //   this.objGlobal.token = token;
    //   setValue("allToken", token);
    //   this.getStandardList();
    //   this.getRegionManage();
    //   this.agriculturalAroduct();

    // });
    if (!!this.id) {
        this.getPreview(this.id);
      }
  },
  methods: {
    getPreview(id) {
      getHandle(
        `/agri/api/zzbzh/standard/queryDetail/${id}`
      ).then((res) => {
        this.checkeds = res.data.bandFlag == 1;
        this.checked = res.data.defaultFlag == 1;
        this.list = res.data;
      });
    },
    onChange(e) {
      this.loading = true;
      let defaultVaule = e ? 1 : 0;
      postHandle(
        `/agri/api/zzbzh/standardBand/default/${this.id}/${defaultVaule}`,
        { id: this.id, defaultVaule, loginUserId:getValue('loginUserId'), tenantCode:getValue('tenantCode') }
      ).then((res) => {
        if (res.status != 0) {
          this.checked = !e;
        }
        this.loading = false;
        Toast(res.msg);
      });
    },
    onChanges(e) {
      this.loadings = true;
      let bandVaule = e ? 1 : 0;
      postHandle(
        `/agri/api/zzbzh/standardBand/band/${this.id}/${bandVaule}`,
        { id: this.id, bandVaule, loginUserId: getValue('loginUserId'), tenantCode: getValue('tenantCode') }
      ).then((res) => {
        if (res.status != 0) {
          this.checkeds = !e;
        }else{
          if(!e){
          this.checked = false
        }
        }


        this.loadings = false;
        Toast(res.msg);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.topContent {
  width: 100%;
  background: linear-gradient(#37b5b5, #fff);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 230px;
  > img {
    width: 80%;
    height: 160px;
    margin: auto;
  }
}
.progressBox {
  width: 90%;
  margin: auto;
  padding: 0 10px;
  // min-height: 150px;
  border-bottom: 3px solid #37b5b5;
  // height: 150px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 12px;
  // height: 142px;
  .bottomHook {
    position: relative;
    bottom: -15px;
    display: flex;
    justify-content: space-between;
    height: 20px;
    > img {
      width: 12px;
      height: 41px;
      margin-top: -6px;
      &:first-child {
        margin-left: 20px;
      }
      &:last-child {
        margin-right: 20px;
      }
    }
  }
  .titleStyle {
    margin: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    > p {
      &:first-child {
        width: 20px;
        height: 2px;
        background: linear-gradient(to right, #fff, #37b5b5);
      }
      &:nth-child(2) {
        margin: 0 10px;
        font-size: 14px;
      }
      &:last-child {
        width: 20px;
        height: 2px;
        background: linear-gradient(to left, #fff, #37b5b5);
      }
    }
  }
  .topHook {
    display: flex;
    justify-content: space-between;
    height: 20px;
    > img {
      width: 12px;
      height: 20px;
      margin-top: -6px;
      &:first-child {
        margin-left: 20px;
      }
      &:last-child {
        margin-right: 20px;
      }
    }
  }
}
.centerContent {
  position: relative;
  margin-top: -87px;
  margin-bottom: 15px;
}
::v-deep .van-step--finish {
  color: #37b5b5;
}
.stepStyle::after {
  content: "";
  width: 32%;
}
.stepStyle {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 12px;
  > div {
    display: flex;
    align-items: center;
    width: 32%;
    margin-bottom: 15px;
    // justify-content: space-around;
    > p {
      flex: 1;
      height: 0;
      border-bottom: 1px dashed #666;
    }
    > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      > p {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background-color: #dddddd;
        margin: 5px 0;
      }
      > span {
        // text-align: center;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
#activeStyle {
  > div {
    > span {
      color: #37b5b5;
    }
    > p {
      // width: 12px;
      // height: 12px;
      // border-radius: 6px;
      background-color: #37b5b5;
    }
  }
  > p {
    border-color: #37b5b5;
  }
}
</style>
